<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈不知代码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .hezi {
            position: relative;
            top: 100px;
            left: 100px;
            width: 400px;
            height: 400px;
        }
        
        .xiao {
            position: absolute;
            top: 0;
            left: 0;
            width: 204px;
            height: 204px;
            background-color: salmon;
            opacity: .3;
            display: none;
        }
        
        .da {
            position: absolute;
            overflow: hidden;
            top: 100px;
            left: 505px;
            width: 400px;
            height: 400px;
            display: none;
        }
        
        .pian {
            width: 100%;
            height: 100%;
        }
        
        .datu {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="hezi">
        <img src="small.jpg" alt="" class="pian">
        <div class="xiao"></div>
    </div>
    <div class="da">
        <img src="big.jpg" alt="" id="img" class="datu">
    </div>
    <script>
        var hezi = document.querySelector('.hezi');
        var xiao = document.querySelector('.xiao');
        var pian = document.querySelector('.pian');
        var da = document.querySelector('.da');
        var img = document.querySelector('#img');
        console.log(pian);
        hezi.addEventListener('mouseover', function() {
            /* console.log('进来了'); */
            xiao.style.display = 'block';
            da.style.display = 'block';
        })
        hezi.addEventListener('mouseout', function() {
                /* console.log('出去了'); */
                xiao.style.display = 'none';
                da.style.display = 'none';
            })
            /* 获取鼠标在盒子中的位置 */
        hezi.addEventListener('mousemove', function(e) {
            /* console.log(e.pageX);
            console.log(e.pageY); */
            /* console.log(hezi.offsetLeft);
            console.log(hezi.offsetTop); */
            var x = e.pageX - hezi.offsetLeft;
            var y = e.pageY - hezi.offsetTop;
            console.log(x, y);
            /* 将获得的鼠标距离给小盒子 */
            var x1 = x - 102; //使得鼠标在小盒子中间
            var y1 = y - 102;
            if (x1 <= 0) {
                x1 = 0;
            } else if (x1 >= 196) {
                x1 = 196;
            }
            if (y1 <= 0) {
                y1 = 0;
            } else if (y1 >= 196) {
                y1 = 196; //196为大盒子-小盒子宽度高度。
            }
            xiao.style.top = y1 + 'px'; //给小盒子上左值,因为上面使得x1，y1不会为负数，所以盒子不会超出。
            xiao.style.left = x1 + 'px';
            var zuida = 102;
            var datu = document.querySelector('.datu'); //获取大图片这个对象
            var dayi = datu.offsetWidth - da.offsetWidth; //大图像移动距离=大图片宽度-盒子宽度
            var bigx = x1 * dayi / 196;
            var bigy = y1 * dayi / 196;
            datu.style.left = -bigx + 'px';
            datu.style.top = -bigy + 'px';
        })
    </script>
</body>

</html>